<template>
  <div>
    <div class="oralLoss">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{name: 'reportLoss' }">{{ $t("nameTitle.reportLoss") }}</el-breadcrumb-item>
        <el-breadcrumb-item>口头挂失</el-breadcrumb-item>
      </el-breadcrumb>
      <!--搜索条件区域-->
      <div class="lossSearch">
        <el-row :gutter="6">
          <!--<el-col :span="2">-->
          <!--<div class="grid-content bg-purple searchInputStyle">查询条件：</div>-->
          <!--</el-col>-->
          <el-col :span="19">
            <div class="grid-content bg-purple-light">
              <avue-form ref="formLoss" v-model="objForm" :option="optionFormData" />
            </div>
          </el-col>
          <el-col :span="3">
            <div class="grid-content bg-purple">
              <el-button type="primary" @click="verificationFn">电话验密</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="verificationTips">
        <span
          :class="{'el-icon-circle-close': this.idPass,'color-red': this.idPass,'el-icon-circle-check': !this.idPass,'color-green': !this.idPass }"
        >{{ this.idCheckTxt }}</span>
      </div>
      <!--客户信息-->
      <informationShow :data="lossInfoData" :option="lossOption" />
      <!--列表信息-->
      <DropDownLoadCrud
        :data="lossAccData"
        :detail-data="lossDetailData"
        :option="lossAccOption"
        @checkedListBtn="checkedListBtn"
        @detailListBtn="detailListBtn"
        @sizeChangeDropDownLoadCrud="sizeChangeDropDownLoadCrud"
        @currentChangeDropDownLoadCrud="currentChangeDropDownLoadCrud"
      />
      <el-row class="mgt20">
        <el-col :span="8" class="txt-center">
          <el-button type="primary" class="btn btn-primary" @click="lossBtnFn(0)">无密挂失</el-button>
        </el-col>
        <el-col :span="8" class="txt-center">
          <el-button type="primary" class="btn btn-primary" @click="lossBtnFn(1)">口头挂失</el-button>
        </el-col>
        <el-col :span="8" class="txt-center">
          <el-button type="primary" class="btn btn-primary" @click="lossBtnFn(2)">永久口挂</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import Axios from 'axios'
import $ from 'jquery'
import informationShow from '@/components/common/informationShow'
import DropDownLoadCrud from '@/components/common/DropDownLoadCrud'
import { queryLoss, saveTransCusInfo, saveTransTraffic } from '@/api/bankBiz/loss/loss'

export default {
  name: 'OralLoss',
  components: {
    informationShow,
    DropDownLoadCrud
  },
  data() {
    const _that = this
    const validateBank = function(rule, value, callback) {
      const bankReg = /^\d{1,}$/
      if (bankReg.test(value)) {
        // 账号
        if (value.indexOf('070667') != -1) {
          if (value.charAt(11) != '1') {
            callback(new Error('请输入对私账号！'))
          } else if (value.length != 22) {
            callback(new Error('请输入22位的对私账号！'))
          } else {
            if (_that.clickEventFlag) {
              _that.lossAccData = []
              _that.lossInfoData = {}
              _that.clickEventFlag = false
              _that.$store.commit('SET_LOSSFLAG', false)
              _that.idCheckTxt = '身份验证未通过'
              _that.idPass = true
              _that.allFn('bankNo')
              _that.customMessageWay = 'bankNo'
            }
            _that.$refs['formLoss'].clearValidate()
          }
        }
        // 卡号
        else if (value.indexOf('62311003') != -1 ||
            value.indexOf('623503001') != -1 ||
            value.indexOf('62299502') != -1 ||
            value.indexOf('62311005') != -1 ||
            value.indexOf('62311007') != -1 ||
            value.indexOf('62264802') != -1 ||
            value.indexOf('62311008') != -1 ||
            value.indexOf('62311006') != -1 ||
            value.indexOf('62264801') != -1 ||
            value.indexOf('62248800') != -1 ||
            value.indexOf('62299501') != -1 ||
            value.indexOf('62248802') != -1 ||
            value.indexOf('62248803') != -1 ||
            value.indexOf('62248810') != -1 ||
            value.indexOf('62248811') != -1 ||
            value.indexOf('62248820') != -1 ||
            value.indexOf('62248880') != -1 ||
            value.indexOf('62248888') != -1 ||
            value.indexOf('62264800') != -1 ||
            value.indexOf('62268811') != -1 ||
            value.indexOf('62268888') != -1 ||
            value.indexOf('62824899') != -1 ||
            value.indexOf('62248801') != -1 ||
            value.indexOf('62824866') != -1 ||
            value.indexOf('62311000') != -1 ||
            value.indexOf('62311001') != -1 ||
            value.indexOf('62311002') != -1) {
          if (value.length != 16) {
            callback(new Error('请输入16位的卡号！'))
          } else {
            if (_that.clickEventFlag) {
              _that.lossAccData = []
              _that.lossInfoData = {}
              _that.clickEventFlag = false
              _that.$store.commit('SET_LOSSFLAG', false)
              _that.idCheckTxt = '身份验证未通过'
              _that.idPass = true
              _that.allFn('bankNo')
              _that.customMessageWay = 'bankNo'
            }
            _that.$refs['formLoss'].clearValidate()
          }
        } else {
          callback(new Error('请输入正确的卡/账号！'))
        }
        callback()
      } else {
        callback(new Error('卡/账号必须为纯数字！'))
      }
    }
    const validateIdCard = function(rule, value, callback) {
      let idcardReg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
      // 护照
      if (_that.objForm.idType == '17') {
        idcardReg = /^\d{1,}$/
      }
      if (idcardReg.test(value)) {
        if (_that.clickEventFlag) {
          _that.lossAccData = []
          _that.lossInfoData = {}
          _that.clickEventFlag = false
          _that.$store.commit('SET_LOSSFLAG', false)
          _that.idCheckTxt = '身份验证未通过'
          _that.idPass = true
          _that.allFn('cardNo')
          _that.customMessageWay = 'cardNo'
        }
        _that.$refs['formLoss'].clearValidate()
        callback()
      } else {
        callback(new Error('请输入正确的证件号码！'))
      }
    }
    return {
      clickEventFlag: false,
      checkFlag: false,
      lossAccDataFlag: false,
      // 顶部搜索栏
      objForm: {},
      optionFormData: {
        'emptyBtn': false,
        'submitBtn': false,
        'menuPosition': 'left',
        'column': [
          {
            'label': '卡/账号',
            'prop': 'cardAccNumber',
            'type': 'search',
            appendClick: () => {
              this.clickEventFlag = true
              this.$refs['formLoss'].validateField('cardAccNumber')
            },
            'mock': {
              'type': 'cardAccNumber'
            },
            'span': 8,
            'rules': [{
              'required': true,
              'message': '请输入卡/账号',
              'trigger': 'blur'
            }, {
              'validator': validateBank,
              'trigger': 'blur'
            }]
          },
          {
            'label': '证件类型',
            'prop': 'idType',
            'type': 'select',
            'value': '11',
            'dicData': [{
              'label': '身份证',
              'value': '11'
            }, {
              'label': '护照',
              'value': '17'
            }],
            'span': 8,
            'mock': {
              'type': 'idType'
            }
          },
          {
            'label': '证件号码',
            'prop': 'idNum',
            'type': 'search',
            appendClick: () => {
              this.clickEventFlag = true
              this.$refs['formLoss'].validateField('idNum')
            },
            'mock': {
              'type': 'idNum'
            },
            'span': 8,
            'rules': [{
              'required': true,
              'message': '请输入证件号码',
              'trigger': 'blur'
            }, {
              'validator': validateIdCard,
              'trigger': 'blur'
            }]
          }]
      },
      idCheckTxt: '身份验证未通过',
      idPass: true,
      lossListAccData: [],
      lossBankNo: '',
      //        lossInfoData: {
      //          'no': '123456789',
      //          'name': '张三',
      //          'sex': '男',
      //          'idType': '身份证',
      //          'idNo': '37289876789876',
      //          'idValidit': '10年',
      //          'phone': '13287668999',
      //          'job': '前端工程师',
      //          'country': '中国',
      //          'address': '山东省济宁市'
      //        },
      lossInfoData: {},
      lossOption: {},
      //        lossAccData: [
      //          {
      //            'no': '卡号/账号',
      //            'status': '状态',
      //            'name': '账户名',
      //            'openDate': '开户日期',
      //            'openBank': '开户行',
      //            'certStatus': '凭证状态',
      //            'timeDepositSum': '活期汇总',
      //            'demandDepositSum': '定期汇总',
      //            'balance': '余额',
      //            'totalNum': 2,
      //            'totalPage': 2,
      //            'currentPage': 1,
      //            'resList': [
      //              {
      //                'transactionDate': '2020-01-01 12:12:12',
      //                'incomeAndExpenditure': '收入',
      //                'transactionType': '001',
      //                'tradingChannel': '网银',
      //                'transactionInformation': '转账',
      //                'summaryInformation': '个人汇款'
      //              },
      //              {
      //                'transactionDate': '2020-01-02 12:12:12',
      //                'incomeAndExpenditure': '支出',
      //                'transactionType': '002',
      //                'tradingChannel': 'ATM',
      //                'transactionInformation': '转账',
      //                'summaryInformation': '汇款'
      //              }
      //            ]
      //          },
      //          {
      //            'no': '卡号/账号',
      //            'status': '状态',
      //            'name': '账户名',
      //            'openDate': '开户日期',
      //            'openBank': '开户行',
      //            'certStatus': '凭证状态',
      //            'timeDepositSum': '活期汇总',
      //            'demandDepositSum': '定期汇总',
      //            'balance': '余额',
      //            'totalNum': 2,
      //            'totalPage': 2,
      //            'currentPage': 1,
      //            'resList': [
      //              {
      //                'transactionDate': '2020-01-01 12:12:12',
      //                'incomeAndExpenditure': '收入',
      //                'transactionType': '001',
      //                'tradingChannel': '网银',
      //                'transactionInformation': '转账',
      //                'summaryInformation': '个人汇款'
      //              },
      //              {
      //                'transactionDate': '2020-01-02 12:12:12',
      //                'incomeAndExpenditure': '支出',
      //                'transactionType': '002',
      //                'tradingChannel': 'ATM',
      //                'transactionInformation': '转账',
      //                'summaryInformation': '汇款'
      //              }
      //            ]
      //          }
      //        ],
      lossAccData: [],
      lossDetailData: [],
      tempData: {},
      lossAccOption: {},
      // 进线验密AND三方验密标识
      callingStatusFlag: false,
      customMessageWay: ''
    }
  },
  created() {
    // 搜索条件配置
    this.lossOption = window.lossOptions.moduleOption.lossOption
    this.lossAccOption = window.lossOptions.moduleOption.lossAccOption
    console.log('loss option data is: ' + JSON.stringify(this.lossOption))
    // if (this.$store.getters.GET_PERSONALFLAG || this.$store.getters.GET_LOSSFLAG) {
    //   this.initCustomerInfo()
    // }
    this.initCustomerInfo()
  },
  mounted() {
    const self = this
    // 验密结果
    window.eventEmitter.$on('EventVerifyResult', (data) => {
      if (data.i_verifyflag == '01' && (data.p_verifytype == '06' || data.p_verifytype == '02')) {
        self.$store.commit('SET_LOSSFLAG', true)
        self.idCheckTxt = '身份验证通过'
        self.idPass = false
        if (data.p_verifytype == '02') {
          self.initCustomerInfo()
        }
      }
    })
    // 振铃进线初始化
    window.eventEmitter.$on('EventCallRecordChange', (data) => {
      self.lossInfoData = {}
      self.lossAccData = []
      self.lossListAccData = []
      self.lossBankNo = ''
      self.$store.commit('SET_LOSSFLAG', false)
      self.$store.commit('SET_OFFLINESTATUS', false)
      self.$store.commit('SET_LOSSCHECKFLAG', false)
      self.$store.commit('SET_GLOBALCARDNO', '')
      self.idCheckTxt = '身份验证未通过'
      self.idPass = true
      self.initCustomerInfo()
    })

    // 挂机初始化
    window.eventEmitter.$on('EventInfoReset', (data) => {
      self.lossInfoData = {}
      self.objForm = {
        'cardAccNumber': '',
        'idType': '11',
        'idNum': ''
      }
      self.lossAccData = []
      self.lossListAccData = []
      self.lossBankNo = ''
      self.idCheckTxt = '身份验证未通过'
      self.idPass = true
      self.checkFlag = false
      self.$store.commit('SET_LOSSCHECKFLAG', false)
      self.$store.commit('SET_GLOBALCARDNO', '')
      self.customMessageWay = ''
    })
  },
  methods: {
    // 界面初始化获取客户信息
    initCustomerInfo() {
      const data = Constants.Model
      if (data && data.userData) {
        if (data.userData.i_verifyflag == '01' && (data.userData.p_verifytype == '06' || data.userData.p_verifytype == '02')) {
          this.$store.commit('SET_LOSSFLAG', true)
          this.idCheckTxt = '身份验证通过'
          this.idPass = false
          if (data.userData.p_cert_type == '01' || data.userData.p_cert_type == '02') {
            this.objForm.cardAccNumber = data.userData.p_cert_num
            this.allFn('bankNo')
            this.customMessageWay = 'bankNo'
          } else if (data.userData.p_cert_type == '03') {
            this.objForm.idType = '11'
            this.objForm.idNum = data.userData.p_cert_num
            this.allFn('cardNo')
            this.customMessageWay = 'cardNo'
          }
        } else {
          if (data.userData.g_currAccNo) {
            this.objForm.cardAccNumber = data.userData.g_currAccNo
            this.allFn('bankNo')
          }
        }
      } else {
        console.log('获取客户信息随路数据为空！')
      }
    },
    getDataFn() {
      console.log('下拉加载请求数据中...................')
      this.isScroll = true
    },
    // 勾选框
    checkedListBtn(data) {
      console.log('receive data is: ' + data[0])
      // 标记是否有选中的账号
      this.checkFlag = data[1]
      this.$store.commit('SET_LOSSCHECKFLAG', data[1])
      // 判断是否选中
      if (data[1]) {
        const index = data[0]
        this.lossListAccData = []
        this.lossListAccData.push(this.lossAccData[index])
        sessionStorage.setItem('accName', this.lossListAccData[0].name)
        sessionStorage.setItem('bankNo', this.lossListAccData[0].no)
        sessionStorage.setItem('openBankName', this.lossListAccData[0].openBank)
        this.lossBankNo = this.lossListAccData[0].no
        this.$store.commit('SET_GLOBALCARDNO', this.lossListAccData[0].no)
        if (!this.lossBankNo) {
          window.globalUiKit.notify('提示', '选中的账户信息没有卡号！', 'error')
        }
      } else {
        this.lossBankNo = ''
      }
    },
    // 账户明细接口
    detailListBtn(data) {
      const accountNo = this.lossAccData[data].no
      this.lossDetailData[data] = {}
      this._detailList(accountNo, data)
    },
    // 行数
    sizeChangeDropDownLoadCrud(val) {
      this.lossAccOption.lossPageTable.currentPage = 1
      this.lossAccOption.lossPageTable.pageSize = val
      console.log('行数' + val)
    },
    // 页码
    currentChangeDropDownLoadCrud(val) {
      this.lossAccOption.lossPageTable.currentPage = val
      console.log('页码' + val)
    },
    // 客户信息查询
    _queryCustInfo(typeNo) {
      // 客户信息接口
      const customerParams = {
        namespace: 'Personal',
        key: 'personalInformationShow',
        query: {
          accountNo: '6231100088888421',
          idType: '',
          idNo: ''
        }
      }
      // 卡号
      if (typeNo == 'bankNo') {
        customerParams.query.accountNo = this.objForm.cardAccNumber
        customerParams.query.idType = ''
        customerParams.query.idNo = ''
      }
      // 证件号
      else {
        customerParams.query.accountNo = ''
        customerParams.query.idType = this.objForm.idType
        customerParams.query.idNo = this.objForm.idNum
      }
      queryLoss(customerParams).then((res) => {
        console.log('response lossCusInfoData is: ' + JSON.stringify(res.data.data))
        // 无此客户
        if (!res.data.data) {
          this.lossInfoData = {}
          window.globalUiKit.notify('提示', '查询无客户信息！', 'info')
          return
        }
        // 清除验证标识
        if (!this.$store.getters.GET_LOSSFLAG) {
          this.$store.commit('SET_LOSSFLAG', false)
          this.idCheckTxt = '身份验证未通过'
          this.idPass = true
        }
        this.lossInfoData = res.data.data
        saveTransCusInfo(this.lossInfoData.name, this.lossInfoData.idType, this.lossInfoData.idNo)
      }).catch((err) => {
        console.log(err)
      })
    },
    // 列表查询
    _searchList(typeNo) {
      const accountParams = {
        namespace: 'ReportLoss',
        key: 'accountInfoData',
        query: {
          accountNo: '6231100088888421',
          idType: '',
          idNo: ''
        }
      }
      // 卡号
      if (typeNo == 'bankNo') {
        accountParams.query.accountNo = this.objForm.cardAccNumber
        accountParams.query.idType = ''
        accountParams.query.idNo = ''
      }
      // 证件号
      else {
        accountParams.query.accountNo = ''
        accountParams.query.idType = this.objForm.idType
        accountParams.query.idNo = this.objForm.idNum
      }
      queryLoss(accountParams).then((res) => {
        console.log('response loss accountData is: ' + JSON.stringify(res.data.data))
        // 清除选中卡号
        this.checkFlag = false
        this.$store.commit('SET_LOSSCHECKFLAG', false)
        // 清除验证标识
        // this.$store.commit('SET_LOSSFLAG', false)
        // this.idCheckTxt = '身份验证未通过'
        // this.idPass = true
        // 请求数据成功 标识
        this.lossAccDataFlag = true
        this.lossAccData = res.data.data
        if (!this.lossAccData) {
          window.globalUiKit.notify('提示', '查询无账户信息！', 'info')
          return
        }
        console.log('lossAccData is: ' + JSON.stringify(this.lossAccData))
      })
    },
    // 明细查询
    _detailList(accountNo, data) {
      const accountParams = {
        namespace: 'ReportLoss',
        key: 'detailListData',
        query: {
          accountNo: accountNo
        }
      }
      queryLoss(accountParams).then((res) => {
        console.log('response loss detail list data is: ' + JSON.stringify(res.data.data))
        this.$set(this.lossDetailData, data, res.data.data)
      })
    },
    // 电话验密
    verificationFn() {
      const self = this
      if (self.$store.getters.GET_OFFLINESTATUS) {
        window.globalUiKit.notify('提示', '离线状态不能验密！', 'error')
        return
      }
      if (!self.checkFlag) {
        window.globalUiKit.notify('提示', '请先选择一个卡号/账号！', 'error')
        return
      }
      if (!self.lossBankNo) {
        window.globalUiKit.notify('提示', '选中的账户信息没有卡号，不能验密！', 'error')
        return
      }
      window.globalUiKit.confirm('提示', '是否要进行电话验密操作?', function() {
        const userdata = {
          // 私有部分，根据不同验证类型组合
          'p_verifytype': '06', // 验密类型
          'p_cert_type': '01', // 介质类型
          'p_cert_num': self.lossBankNo || '', // 介质号码
          'p_accno': '', // 对公客户号
          'p_oper_id': '', // 对公操作员ID
          'p_pass_type': '01', // 密码类型
          'p_pass_operate': '01', // 交易密码操作
          'p_biz': '00', // 业务操作
          // 公共部分
          'r_function': 'singletransfer',
          'r_flag': '3',
          'con_flag': '1'
        }
        globalUserData.verifyPass(userdata)
        if (window.Settings.verifySwitch) {
          self.$store.commit('SET_LOSSFLAG', true)
          self.idCheckTxt = '身份验证通过'
          self.idPass = false
        }
      })
    },
    // 按钮搜索条件，请求方法集合
    allFn(typeNo) {
      // 离线状态不能操作
      if (this.$store.getters.GET_OFFLINESTATUS) {
        window.globalUiKit.notify('提示', '离线状态不能查询！', 'error')
        return
      }
      this._searchList(typeNo)
      this._queryCustInfo(typeNo)
    },
    // 底部挂失按钮
    lossBtnFn(index) {
      // 离线状态不能操作
      if (this.$store.getters.GET_OFFLINESTATUS) {
        window.globalUiKit.notify('提示', '离线状态不能操作', 'error')
        return
      }
      if (!this.checkFlag) {
        window.globalUiKit.notify('提示', '请选择卡号/账号！', 'error')
        return
      } else {
        // 调接口
        if (index == 0) {
          this._accountLoss('02', '00')
        } else {
          if (!this.$store.getters.GET_LOSSFLAG) {
            window.globalUiKit.notify('提示', '请先进行验密！', 'error')
            return
          }
          if (index == 1) {
            this._accountLoss('02', '02')
          } else if (index == 2) {
            this._accountLoss('01', '01')
          }
        }
      }
    },
    // 挂失接口
    _accountLoss(type, flag) {
      // 客户信息接口
      const lossParams = {
        namespace: 'ReportLoss',
        key: 'accountLoss',
        query: {
          lossMethod: type,
          accountNo: sessionStorage.getItem('bankNo') || ''
        }
      }
      queryLoss(lossParams).then((res) => {
        console.log('response loss result is: ' + JSON.stringify(res.data.data))
        if (res.data.code == 200) {
          if (type == '01' && flag == '01') {
            window.globalUiKit.notify('提示', '永久挂失成功！', 'success')
            saveTransTraffic('ReportLoss-oralLoss', '成功', '')
          } else if (type == '02' && flag == '02') {
            saveTransTraffic('ReportLoss-permanentLoss', '成功', '')
            window.globalUiKit.notify('提示', '口头挂失成功！', 'success')
          } else if (type == '02' && flag == '00') {
            saveTransTraffic('ReportLoss-noSecretLoss', '成功', '')
            window.globalUiKit.notify('提示', '无密挂失成功！', 'success')
          }
          this._searchList(this.customMessageWay)
        } else {
          if (type == '01' && flag == '01') {
            saveTransTraffic('ReportLoss-oralLoss', '失败', res.data.message)
            window.globalUiKit.notify('提示', '永久挂失失败！', 'error')
          } else if (type == '02' && flag == '02') {
            saveTransTraffic('ReportLoss-permanentLoss', '失败', res.data.message)
            window.globalUiKit.notify('提示', '口头挂失失败！', 'error')
          } else if (type == '02' && flag == '00') {
            saveTransTraffic('ReportLoss-noSecretLoss', '失败', res.data.message)
            window.globalUiKit.notify('提示', '无密挂失失败！', 'error')
          }
        }
      }).catch((err) => {
        if (type == '01' && flag == '01') {
          saveTransTraffic('ReportLoss-oralLoss', '失败', '')
          window.globalUiKit.notify('提示', '永久挂失失败！', 'error')
        } else if (type == '02' && flag == '02') {
          saveTransTraffic('ReportLoss-permanentLoss', '失败', '')
          window.globalUiKit.notify('提示', '口头挂失失败！', 'error')
        } else if (type == '02' && flag == '00') {
          saveTransTraffic('ReportLoss-noSecretLoss', '失败', '')
          window.globalUiKit.notify('提示', '无密挂失失败！', 'error')
        }
        console.log(err)
      })
    }
  },
  // 路由拦截
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (vm.lossBankNo) {
        sessionStorage.setItem('bankNo', vm.lossBankNo)
      } else {
        sessionStorage.setItem('bankNo', '')
      }
    })
  }
}
</script>

<style scoped>
  .el-breadcrumb {
    padding: 10px 0 !important;
  }

  .el-button--primary {
    margin-top: 5px !important;
  }

  .oralLoss .el-form-item {
    margin-bottom: 0 !important;
  }

  .topTit {
    line-height: 40px;
  }

  .oralLoss .avue-group__item {
    padding: 0 !important;
  }

  .oralLoss .avue-form__group > div {
    padding: 0 !important;
  }

  .mgt20 {
    margin-top: 20px;
  }

  .verificationTips {
    width: 100%;
    height: 1px;
    text-align: right;
    position: relative;
  }

  .verificationTips span {
    position: absolute;
    right: 10px;
    top: 15px;
    z-index: 99;
  }
</style>
